<script setup lang="ts">
import CustomDialog from '@/components/CustomDialog/CustomDialog.vue'

import {
  RenderWarningTag,
  renderState,
  renderType,
} from '@/mixins/Warning'

import { WARNING_WORK_ORDER_STATES } from '@/enum'

import type {
  WarningInfo,
  WorkOrderInfo,
  WorkOrderUser,
} from '@/types'

defineProps<{
  warningInfo?: WarningInfo
  workOrderInfo?: WorkOrderInfo
  workOrderUsers?: WorkOrderUser[]
}>()

const dialogRef = ref<InstanceType<typeof CustomDialog>>()

const info: {
  auditContent: string
  state: WARNING_WORK_ORDER_STATES
} = reactive({
  auditContent: '',
  state: WARNING_WORK_ORDER_STATES.SOLVED,
})

function open() {
  info.auditContent = ''
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="查看告警"
    class="custom-dialog"
    :show-confirm-button="false"
    cancel-button-text="关闭"
  >
    <ElDescriptions
      v-if="warningInfo"
      title="告警信息"
      border
      :column="2"
    >
      <ElDescriptionsItem label="告警类别" :width="200">
        {{ warningInfo.warningCategoryName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警类型" :width="200">
        <RenderWarningTag
          :warning-info="warningInfo"
          :render="renderType"
        />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警持续时间">
        {{ warningInfo.warningDurationTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="指标名称">
        {{ warningInfo.indicatorName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="测点点位号">
        {{ warningInfo.indicatorCode }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="用能单元" :span="2">
        {{ warningInfo.pointNameFull }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="设备名称">
        {{ warningInfo.toolName }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警开始时间" :span="2">
        {{ warningInfo.warningStartTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警内容" :span="2">
        {{ warningInfo.warningContent }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="告警状态" :span="2">
        <RenderWarningTag
          :warning-info="warningInfo"
          :render="renderState"
        />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="详细内容描述" :span="2">
        {{ warningInfo.content }}
      </ElDescriptionsItem>
    </ElDescriptions>
    <ElDescriptions
      v-if="workOrderInfo"
      title="处理信息"
      border
      :column="2"
      class="margin-top-sm"
    >
      <ElDescriptionsItem label="工单号" :span="2" :width="200">
        {{ workOrderInfo.workOrderNum }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="处理人" :span="2">
        <div class="overflow-hidden">
          <ElTooltip
            v-for="item in workOrderUsers"
            :key="item.userId"
            :content="`账号：${item.loginName}`"
            placement="top"
          >
            <ElTag style="float: left; margin-right: 10px">
              {{ item.userName }}
            </ElTag>
          </ElTooltip>
        </div>
      </ElDescriptionsItem>
      <ElDescriptionsItem label="工单创建时间" :width="200">
        {{ workOrderInfo.creationTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="期望处理结束时间">
        {{ workOrderInfo.processingEndTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="审核提交人" :span="2">
        {{ workOrderInfo.userName }}
        {{
          workOrderInfo.loginName
            ? `（${workOrderInfo.loginName}）`
            : ''
        }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="审核提交时间">
        {{ workOrderInfo.submitTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="处理时间">
        {{ workOrderInfo.processingTime }}
      </ElDescriptionsItem>
      <ElDescriptionsItem label="处理内容描述" :span="2">
        {{ workOrderInfo.processingContent }}
      </ElDescriptionsItem>
    </ElDescriptions>
  </CustomDialog>
</template>
